/**
 * Created by SUMMER on 2021/12/16.
 * Email:bohemiancy@outlook.com
 * Description:
 */
import React from "react";
import {Menu} from 'antd';
import {ReactComponent as mapIcon} from '../../image/icon_map.svg';
import './left_menu.less'
import mapJson from './menu.json';
import {Link} from "react-router-dom";
import Icon from '@ant-design/icons';

export const LeftMenu: React.FC<any> = () => {

  const {SubMenu} = Menu;

  // @ts-ignore
  const MapIcon = props => <Icon component={mapIcon} {...props} />;

  function handleClick(e: any) {

  }

  const [openKeys, setOpenKeys] = React.useState(['地图基础']);

  const rootSubmenuKeys: String[] = [];

  mapJson.menu.map((item:any)=>{
    const hasSubMenu = item.hasOwnProperty('menuTitle');
    if (hasSubMenu) {
      rootSubmenuKeys.push(item.menuTitle);
    }
  })

  function onOpenChange(keys: any) {
    const latestOpenKey = keys.find((key: any) => openKeys.indexOf(key) === -1);
    if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
      setOpenKeys(keys);
    } else {
      setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
    }
  }

  return (<div className='left-parent'>
    <Menu
      onClick={handleClick}
      style={{width: 256}}
      openKeys={openKeys}
      onOpenChange={onOpenChange}
      mode="inline"
    >
      {mapJson.menu.map((item: any) => {
        const hasSubMenu = item.hasOwnProperty('menuTitle');
        if (hasSubMenu) {
          return (
            <SubMenu key={item.menuTitle} icon={<MapIcon/>} title={item.menuTitle}>
              {
                item.menuObj.map((subItem: any) => {
                  return (
                    <Menu.Item key={subItem.title} icon={<MapIcon/>}>
                      <Link to={`/${subItem.key}`}>
                        {subItem.title}
                      </Link>
                    </Menu.Item>
                  )
                })
              }
            </SubMenu>
          )
        } else {
          return (
            <Menu.Item key={item.title} icon={<MapIcon/>}>
              <Link to={'/display_map'}>
                {item.title}
              </Link>
            </Menu.Item>
          )
        }
      })}
    </Menu>
  </div>)
}
